import { addWordsUsingPost, delWordsUsingPost, listRulesUsingGet } from "@/services/novel-web/wordRuleController";
import { MessageError } from "@/utils/commonUtils";
import { SearchOutlined } from "@ant-design/icons";
import { Button, Card, Input, List, message, Row, Space, Switch } from "antd";
import { useEffect, useState } from "react";
import "./index.less";





const WordRule: React.FC = () =>{
  const [searchText,setSearchText] = useState('');
  const [rules,setRules] = useState<API.Wordrule[]>([]);
  const [filterRules,setFilterRules] = useState<API.Wordrule[]>([]);

  const [newWord,setNewWord] = useState('');


  const loadRules = async()=>{
    try {
      const resp = await listRulesUsingGet();
      if(resp.data) {
        setRules(resp.data);
      }
    } catch (error) {
      MessageError(error);
    }
  };

  useEffect(()=>{
    loadRules();
  },[]);

  useEffect(()=>{
    const newRules = rules.filter(rule =>{
      return rule.word?.includes(searchText);
    });
    setFilterRules(newRules);
  },[rules,searchText]);


  const handleToggle = async(item: API.Wordrule)=>{
    try {
      if(item.status == 0){
        const resp = await delWordsUsingPost({
          wordList: item.word,
        })
        if(resp) {
          setFilterRules(filterRules.map(rule => 
            rule.id === item.id ? { ...rule, status: 1 } : rule
          ));
          message.success('禁用成功');
        }
      } else {
        const resp = await addWordsUsingPost({
          wordList: item.word,
        })
        if(resp) {
          setFilterRules(filterRules.map(rule => 
            rule.id === item.id ? { ...rule, status: 0 } : rule
          ));
          message.success('启用成功');
        }
      }
    } catch (error) {
      MessageError(error);
    }
    
  };

  const handleAdd = async (item:string) => {
    try {
      const resp = await addWordsUsingPost({
        wordList: item,
      })
      if(resp) {
        message.success('添加成功');
        setNewWord('');
        loadRules();
      }
    } catch (error) {
      MessageError(error);
    }
  };


  return (
    <div className="root-div">
      <Row align={"middle"} justify={"space-evenly"} style={{ margin: 8 }}>
        <Input
          className="search"
          placeholder="搜索敏感词"
          prefix={<SearchOutlined />}
          value={searchText}
          onChange={e => setSearchText(e.target.value)}
          style={{ width: 300 }}
        />
        <Space>
          <Input
            placeholder="输入新敏感词"
            value={newWord}
            onChange={e => setNewWord(e.target.value)}
            style={{ width: 200 }}
          />
          <Button
            type="primary"
            onClick={()=>handleAdd(newWord)}
          >
            添加
          </Button>
        </Space>
      </Row>
      
      <Card className="list-wrapper">
      <List
        className="list"
        size="small"
        dataSource={filterRules}
        renderItem={item =>(
          <List.Item
            actions={[
              <Switch
                className="right-switch"
                checked={item.status==0}
                onChange={()=> {handleToggle(item);}}
              />
            ]}
          >
            <List.Item.Meta
              className="word"
              title={item.word}
            />
          </List.Item>
          
        )}
      />
      </Card>
    </div>
  );
};

export default WordRule;